<template>
	<view class="container">
		<!-- 游乐项目详情页面 -->
		<view class="project-detail" v-if="projectInfo">
			<!-- 项目图片 -->
			<view class="project-image">
				<image :src="projectInfo.img" mode="aspectFill"></image>
			</view>

			<!-- 项目信息 -->
			<view class="project-info">
				<view class="project-header">
					<text class="project-title">{{ projectInfo.name }}</text>
					<!-- 喜欢数与标题对齐 -->
					<view class="like-section" @click="toggleLike">
						<image :src="isLiked ? '/static/images/like_selected.png' : '/static/images/like.png'" class="like-icon">
						</image>
						<text class="like-count">{{ projectInfo.like }}</text>
					</view>
				</view>

				<view class="project-description">
					<text class="description-title">项目介绍</text>
					<text class="description-content">{{ projectInfo.refer }}</text>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view v-else class="loading">
			<text>加载中...</text>
			<text>项目ID: {{ projectId }}</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { AmusementProjects } from '../../static/data/CommonData.js'

// 响应式数据
const projectInfo = ref(null)
const projectId = ref('')
const isLiked = ref(false)

// 页面加载时获取参数
onLoad((options) => {
	console.log('ProjectDetails页面加载，参数：', options)
	if (options && options.id) {
		projectId.value = options.id
		loadProjectDetails(options.id)
	} else {
		console.log('没有接收到id参数')
		uni.showToast({
			title: '参数错误',
			icon: 'none'
		})
	}
})

// 加载游乐项目详情
function loadProjectDetails(id) {
	console.log('正在查找游乐项目，id：', id)
	console.log('可用项目数据：', AmusementProjects)

	// 从数据中查找对应的游乐项目
	const project = AmusementProjects.find(item => item.id === id)
	console.log('找到的项目：', project)

	if (project) {
		projectInfo.value = project
		console.log('项目信息设置成功：', projectInfo.value)
	} else {
		console.log('未找到项目信息')
		uni.showToast({
			title: '项目信息不存在',
			icon: 'none'
		})
	}
}

// 切换点赞状态
function toggleLike() {
	if (isLiked.value) {
		// 取消点赞
		isLiked.value = false
		projectInfo.value.like = String(parseInt(projectInfo.value.like) - 1)
	} else {
		// 点赞
		isLiked.value = true
		projectInfo.value.like = String(parseInt(projectInfo.value.like) + 1)
	}
}
</script>

<style scoped>
.container {
	width: 100%;
	min-height: 100vh;
	background-color: #fbfbfb;
}

.project-detail {
	width: 100%;
}

/* 项目图片 */
.project-image {
	width: 100%;
	height: 400rpx;
	position: relative;
}

.project-image image {
	width: 100%;
	height: 400rpx;
}



/* 项目信息 */
.project-info {
	background-color: #fff;
	margin-top: -20rpx;
	border-radius: 20rpx 20rpx 0 0;
	padding: 40rpx 30rpx;
}

.project-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
}

.project-title {
	font-size: 48rpx;
	font-weight: 600;
	color: #333;
	flex: 1;
}

/* 项目介绍 */
.project-description {
	margin-bottom: 60rpx;
}

.description-title {
	display: block;
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 20rpx;
}

.description-content {
	display: block;
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
}

/* 喜欢数样式 */
.like-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

.like-icon {
	width: 40rpx;
	height: 40rpx;
	margin-bottom: 8rpx;
}

.like-count {
	font-size: 24rpx;
	color: #666;
	font-weight: 500;
}

/* 加载状态 */
.loading {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	gap: 20rpx;
}

.loading text {
	font-size: 32rpx;
	color: #666;
}
</style>